<template>
	<view v-if="flag" @click="handleMask">
		<view class="mask absolute"></view>
		<view class="photo-train display-flex-column-just-around" :class="[className]" :style="[{height: height+'rpx'},styleObj]">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
    className: {
      type: String,
      default: ''
    },
    styleObj: {
      type: Object
    },
    height: {
      type: String,
      default: '',
    },
		flag: {
			type: Boolean,
			default: false,
		},
	},
	methods: {
		handleMask() {
			// this.flag = false
		}
	},
}
</script>

<style lang="scss" scoped>
.mask {
	position:fixed;
	width: 100%;
	height: 100%;
	right: 0;
	z-index: 4;
	
	background-color: rgba($color: #000, $alpha: 0.5);
}
.photo-train {
	box-sizing: border-box;
	padding: 34rpx 36rpx;
	position: fixed;
	margin: auto;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 23;
	width: 560rpx;
	max-height: 780rpx;
  min-height: 280rpx;
	background: #ffffff;
	border-radius: 12rpx;
}
</style>